<template>
  <div class="container" v-loading="isLoading">
    <div class="main-content">
      <el-card>
        <el-button-group>
          <el-upload  ref="upload" :action="uploadAction"  :show-file-list="false" :on-change="readExcelUpdate" :auto-upload="false" style="float: left;">
            <el-button slot="trigger" icon="el-icon-upload" size="small" title="导入职位信息" type="primary">导入职位信息</el-button>
          </el-upload>
          <el-upload v-show="isShow" ref="upload" :action="uploadAction"  :show-file-list="false" :on-change="readExcelAdd" :auto-upload="false" style="float: left;">
            <el-button slot="trigger" icon="el-icon-upload" size="small" title="导入职位信息(添加)" type="primary">导入职位信息(添加)</el-button>
          </el-upload>
          <el-button size="small" title="下载模板" @click="onDownloadTmp">点击下载模板</el-button>
        </el-button-group>
      </el-card>
    </div>
    <el-table :data="tmpDataList" id="download" style="display: none;">
      <el-table-column type="index" label="序号" ></el-table-column>
      <el-table-column prop="groupName" label="主体" ></el-table-column>
      <el-table-column prop="recName" label="需求公司" ></el-table-column>
      <el-table-column prop="depart1" label="一级部门" ></el-table-column>
      <el-table-column prop="depart2" label="二级部门" ></el-table-column>
      <el-table-column prop="jobTitle" label="招聘岗位" ></el-table-column>
      <el-table-column prop="jobType" label="岗位类别" ></el-table-column>
<!--      <el-table-column prop="needCount" label="需求人数" ></el-table-column>-->
      <el-table-column prop="jobDesc" label="岗位职责" ></el-table-column>
      <el-table-column prop="requirement" label="任职要求" ></el-table-column>
      <el-table-column prop="workPlace" label="工作地点" ></el-table-column>
<!--      <el-table-column prop="isTravel" label="是否有常规出差" ></el-table-column>-->
<!--      <el-table-column prop="isAdvanceInternship" label="是否要求提前实习" ></el-table-column>-->
<!--      <el-table-column prop="destSchool" label="目标院校" ></el-table-column>-->
<!--      <el-table-column prop="destMajor" label="目标专业" ></el-table-column>-->
<!--      <el-table-column prop="eduDegree" label="学历要求" ></el-table-column>-->
<!--      <el-table-column prop="hangzhouNeedCount" label="目标城市需求人数:杭州" ></el-table-column>-->
<!--      <el-table-column prop="nanjingNeedCount" label="目标城市需求人数:南京" ></el-table-column>-->
<!--      <el-table-column prop="wuhanNeedCount" label="目标城市需求人数:武汉" ></el-table-column>-->
<!--      <el-table-column prop="cityNeedCount" label="目标城市需求人数:其他城市" ></el-table-column>-->
<!--      <el-table-column prop="cuSchoolNeedCount" label="院校层次需求人数:985/211" ></el-table-column>-->
<!--      <el-table-column prop="regularSchoolNeedCount" label="院校层次需求人数:普通院校" ></el-table-column>-->
      <el-table-column prop="applyUrl" label="链接" ></el-table-column>
    </el-table>
    <el-dialog title="导入结果" :visible.sync="dialogErrorVisible" width="800px" :close-on-click-modal="false">
      <h4>共计<strong> {{totalCount}} </strong>条记录，成功：<strong style="color:green"> {{successCount}} </strong>条，
        失败：<strong style="color:red"> {{errorCount}} </strong>条 </h4>
      <el-button  @click="onDownloadError" style="float: right; margin-bottom: 10px"  size="small"  type="primary" plain title="点击下载错误记录" v-if="errorList.length>0">下载错误记录</el-button>
      <el-table :data="errorList"  style="max-height:600px; overflow-y: auto;"  v-if="errorList.length>0">
        <el-table-column prop="index" label="错误行" ></el-table-column>
        <el-table-column prop="field" label="字段" ></el-table-column>
        <el-table-column prop="val" label="值" ></el-table-column>
        <el-table-column prop="reason" label="失败原因" ></el-table-column>
      </el-table>
    </el-dialog>
    <el-table :data="errorDataList" id="downloadError" style="display: none;">
      <el-table-column prop="groupName" label="主体" ></el-table-column>
      <el-table-column prop="recName" label="需求公司" ></el-table-column>
      <el-table-column prop="depart1" label="一级部门" ></el-table-column>
      <el-table-column prop="depart2" label="二级部门" ></el-table-column>
      <el-table-column prop="jobTitle" label="招聘岗位" ></el-table-column>
      <el-table-column prop="jobType" label="岗位类别" ></el-table-column>
      <el-table-column prop="jobDesc" label="岗位职责" ></el-table-column>
      <el-table-column prop="requirement" label="任职要求" ></el-table-column>
      <el-table-column prop="workPlace" label="工作地点" ></el-table-column>
      <el-table-column prop="applyUrl" label="链接" ></el-table-column>
      <el-table-column prop="reason" label="失败原因" ></el-table-column>
    </el-table>

  </div>
</template>

<script>
  import XLSX from 'xlsx'
  import FileSaver from 'file-saver'
  import {importExcel} from "../../api/job/zhongkong";

  export default {
    components: {},
    data(){
      return{
        isLoading:false,
        token:{'token':this.$store.state.token},
        uploadAction:'', //上传图片地址
        tmpDataList:[{
          groupName:'主体', // 主体
          recName:'需求公司', // 需求公司
          depart1:'产品研发总部', // 一级部门
          depart2:'研发中心', // 二级部门
          jobType: '技术研发类', // 岗位类别
          jobTitle:'软件验证工程师', // 招聘岗位
          // needCount:1, // 需求人数
          jobDesc:'1、负责...', // 岗位职责
          requirement:'1、本科及以上以上...', // 任职要求
          workPlace:'杭州', // 工作地点
          // isTravel: '是', // 是否有常规出差
          // isAdvanceInternship:'是', // 是否要求提前实习
          // destSchool:'浙江大学、浙江工业大学等杭州区域院校', // 目标学校
          // destMajor:'计算机、软件工程、自动化、控制工程、信息管理等', // 目标专业
          // eduDegree:'本科及以上', // 学历要求
          // hangzhouNeedCount: '1', // 目标城市需求人数
          // nanjingNeedCount: '2', // 目标城市需求人数
          // wuhanNeedCount: '3', // 目标城市需求人数
          // cityNeedCount: '西安:1', // 目标城市需求人数
          // cuSchoolNeedCount:1, // 985/211 高等院系需求人数
          // regularSchoolNeedCount:0, // 普通院校需求人数
          applyUrl:'猎聘职位地址'
        }],
        dialogErrorVisible:false, //显示错误信息
        errorList:[],  //上传会员信息 有误的
        successCount:0,  //成功条数
        errorCount:0,  //失败条数
        totalCount:0,  //共计
        errorDataList:[],
          isShow: false
      }
    },
    watch:{
      dialogErrorVisible:function (val,oldVal) {
        if(val == false && oldVal == true){
          this.errorList = [];
        }
      }
    },
    methods:{
      //下载模板
      onDownloadTmp(){
        var wb = XLSX.utils.table_to_book(document.querySelector("#download"));
        console.log("wb===>",wb);
        var ws = wb.Sheets.Sheet1;
        ws['!cols']= [{wpx: 105},{wpx: 105}, {wpx: 100},{wpx: 100},{wpx: 105}, {wpx: 105}, {wpx:105}];
        // XLSX.utils.sheet_to_txt(wb.Sheets.Sheet1['B2'],'General');
        // XLSX.utils.sheet_to_txt(wb.Sheets.Sheet1['C2'],'General');
        // XLSX.utils.sheet_to_txt(wb.Sheets.Sheet1['D2'],'General');
        // XLSX.utils.cell_set_number_format(wb.Sheets.Sheet1['E2'],'General');
        // XLSX.utils.cell_set_number_format(wb.Sheets.Sheet1['F2'],'General');
        // XLSX.utils.sheet_to_txt(wb.Sheets.Sheet1['G2'],'General');
        // XLSX.utils.cell_set_number_format(wb.Sheets.Sheet1['H2'],'General');
        // XLSX.utils.cell_set_number_format(wb.Sheets.Sheet1['I2'],'General');
        // XLSX.utils.cell_set_number_format(wb.Sheets.Sheet1['K2'],'General');

        var wbout = XLSX.write(wb, {bookType: "xlsx", bookSST: true, type: "array"});
        try {
          FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "岗位模板.xlsx");
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },
      //下载错误信息
      onDownloadError(){
        var wb = XLSX.utils.table_to_book(document.querySelector("#downloadError"));
        console.log("wb===>",wb);
        var ws = wb.Sheets.Sheet1;
        ws['!cols']= [{wpx: 105},{wpx: 105}, {wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 100},{wpx: 500}];
        for(var ww in ws){
          if(ww.indexOf("G") != -1 && ww!='G1'){
            var intG =  parseInt(ws[ww].v+"");
            ws[ww].v = intG;
            ws[ww].cellDates = true;
            ws[ww].z = "yyyy-mm-dd";
          }else{
            XLSX.utils.cell_set_number_format(wb.Sheets.Sheet1[ww],'@');
          }
        }

        var wbout = XLSX.write(wb, {bookType: "xlsx", bookSST: true, type: "array"});
        try {
          FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "上传失败记录.xlsx");
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;

      },
        readExcelUpdate(file){
          this.readExcel(file, 'update');
        },
        readExcelAdd(file){
            this.readExcel(file, 'add');
        },
      //上传
      readExcel(file, type) {
        this.isLoading = true;
        var suffix = file.name.split(".")[1]
        if(suffix != 'xls' && suffix !='xlsx'){
          this.isLoading = false;
          this.$message.warning('文件类型不正确！');
          return false;
        }
        const fileReader = new FileReader();
        fileReader.onload = (ev) => {
          try {
            const data = ev.target.result;
            const workbook = XLSX.read(data, {
              type: 'binary'
            });
            for (let sheet in workbook.Sheets) {
              const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
              if(sheetArray!=null && sheetArray.length >0){
                console.log("sheetArray",sheetArray);
                this.importData({mapList:sheetArray, type: type});
              }
            }
            // this.$message.success('导入完成！');
          }catch (e) {
            this.isLoading = false;
            this.$message.warning('文件类型不正确！');
            return false;
          }
        };
        this.isLoading = false;
        fileReader.readAsBinaryString(file.raw);
      },
      async importData(sheetArray){
        this.isLoading = true;
        let resp = await importExcel(sheetArray);
        console.log("====resp",resp);
        if(!this.qUtil.validResp(resp)){
          this.$message.error(resp.errMsg || '导入失败')
          this.isLoading = false;
          return false;
        }
        // this.$message.success('数据已导入!')
        this.isLoading = false;

        this.errorList = resp.data.errorList || [];
        this.errorDataList = resp.data.errorDataList || [];
        this.successCount = resp.data.successCount;
        this.errorCount = resp.data.errorCount;
        this.totalCount = resp.data.totalCount;
        this.dialogErrorVisible = true;
      }
    },
    mounted(){
    }
  }
</script>

<style scoped>
</style>

